import React, { useState, useEffect } from 'react';

// 统计信息面板组件
export default function StatisticsPanel({ warehouseData }) {
  // 修复：从warehouseData中获取layerStatistics而不是作为单独的参数
  const { totalSlots, occupiedSlots, emptySlots, layerStatistics } = warehouseData;
  const occupancyRate = totalSlots > 0 ? ((occupiedSlots / totalSlots) * 100).toFixed(2) : '0.00';
  
  // 添加折叠状态管理，使用localStorage保存状态
  const getCollapsedState = () => {
    try {
      const savedState = localStorage.getItem('statisticsPanelCollapsed');
      return savedState !== null ? JSON.parse(savedState) : false;
    } catch (e) {
      console.error('Failed to read collapsed state from localStorage:', e);
      return false;
    }
  };
  
  const [isCollapsed, setIsCollapsed] = useState(getCollapsedState());
  
  // 保存折叠状态到localStorage
  useEffect(() => {
    try {
      localStorage.setItem('statisticsPanelCollapsed', JSON.stringify(isCollapsed));
    } catch (e) {
      console.error('Failed to save collapsed state to localStorage:', e);
    }
  }, [isCollapsed]);
  
  // 切换折叠状态
  const toggleCollapse = () => {
    setIsCollapsed(!isCollapsed);
  };

  return (
    <div style={{
      position: 'fixed',
      bottom: '20px',
      left: '50%',
      transform: 'translateX(-50%)',
      background: 'rgba(30, 30, 30, 0.9)',
      padding: '15px',
      borderRadius: '10px',
      border: '2px solid #2196F3',
      backdropFilter: 'blur(10px)',
      zIndex: 1000,
      minWidth: isCollapsed ? '200px' : '1000px',
      maxWidth: '100%',
      transition: 'all 0.3s ease-in-out',
      height: isCollapsed ? 'auto' : 'auto'
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: isCollapsed ? '0' : '15px' }}>
        <h3 style={{ 
          margin: 0, 
          color: '#2196F3', 
          fontSize: '18px',
          marginRight: '15px'
        }}>📊 仓库统计</h3>
        <button
          onClick={toggleCollapse}
          style={{
            background: 'none',
            border: 'none',
            color: '#2196F3',
            fontSize: '16px',
            cursor: 'pointer',
            padding: '5px',
            borderRadius: '3px',
            transition: 'transform 0.3s ease'
          }}
          title={isCollapsed ? '展开面板' : '折叠面板'}
        >
          {isCollapsed ? '▲' : '▼'}
        </button>
      </div>
      
      {!isCollapsed && (
        <div>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(4, 1fr)',
            gap: '10px',
            marginBottom: '15px'
          }}>
            <div style={{
              background: 'rgba(50, 50, 50, 0.5)',
              padding: '10px',
              borderRadius: '5px',
              minWidth: '100px'
            }}>
              <div className="stat-value" style={{ 
                fontSize: '20px', 
                fontWeight: 'bold',
                color: '#fff'
              }}>{totalSlots || 0}</div>
              <div className="stat-label" style={{ 
                fontSize: '12px', 
                color: '#ddd'
              }}>总货位</div>
            </div>
            
            <div style={{
              background: 'rgba(50, 50, 50, 0.5)',
              padding: '10px',
              borderRadius: '5px',
              minWidth: '100px'
            }}>
              <div className="stat-value" style={{ 
                fontSize: '20px', 
                fontWeight: 'bold',
                color: '#4CAF50'
              }}>{occupiedSlots || 0}</div>
              <div className="stat-label" style={{ 
                fontSize: '12px', 
                color: '#ddd'
              }}>已占用</div>
            </div>
            
            <div style={{
              background: 'rgba(50, 50, 50, 0.5)',
              padding: '10px',
              borderRadius: '5px',
              minWidth: '100px'
            }}>
              <div className="stat-value" style={{ 
                fontSize: '20px', 
                fontWeight: 'bold',
                color: '#FF9800'
              }}>{emptySlots || 0}</div>
              <div className="stat-label" style={{ 
                fontSize: '12px', 
                color: '#ddd'
              }}>空闲</div>
            </div>
            
            <div style={{
              background: 'rgba(50, 50, 50, 0.5)',
              padding: '10px',
              borderRadius: '5px',
              minWidth: '120px'
            }}>
              <div className="stat-value" style={{ 
                fontSize: '24px', 
                fontWeight: 'bold',
                color: '#fff'
              }}>{occupancyRate || '0.00'}%</div>
              <div className="stat-label" style={{ 
                fontSize: '14px', 
                color: '#ddd'
              }}>占用率</div>
            </div>
          </div>

          {layerStatistics && layerStatistics.length > 0 && (
            <div className="layer-stats">
              <h4 style={{ 
                margin: '0 0 15px 0', 
                color: '#fff', 
                fontSize: '16px'
              }}>各层统计</h4>
              <div className="layer-stats-grid" style={{ 
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))',
                gap: '10px'
              }}>
                {layerStatistics.map((layer, index) => (
                  <div key={index} className="layer-stat-item" style={{ 
                    background: 'rgba(50, 50, 50, 0.5)',
                    padding: '10px',
                    borderRadius: '5px',
                    textAlign: 'center'
                  }}>
                    <div className="layer-number" style={{ 
                      fontWeight: 'bold',
                      marginBottom: '5px',
                      color: '#2196F3'
                    }}>第{layer.layer}层</div>
                    <div className="layer-details" style={{ 
                      fontSize: '12px',
                      color: '#ddd'
                    }}>
                      <div>总计: {layer.total}</div>
                      <div>占用: {layer.occupied}</div>
                      <div>空闲: {layer.empty}</div>
                      <div>占用率: {layer.occupancyRate}%</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      )}
      
      {isCollapsed && (
        <div style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          fontSize: '14px',
          color: '#fff'
        }}>
          总货位: {totalSlots || 0} | 已占用: {occupiedSlots || 0} | 空闲: {emptySlots || 0} | 占用率: {occupancyRate || '0.00'}%
        </div>
      )}
    </div>
  );
}